<template>
  <div>
    <div class="card-box">
      <el-card class="elcard" style="margin-right:10px;overflow:initial;">
        <div slot="header" class="clearfix">
          <span class="tit">人才领域分布</span>
        </div>
        <div id="chartOne" style="width:100%;height:390px;"></div>
      </el-card>
      <el-card class="elcard" :body-style="{'padding-right':'0'}" style="margin-left:10px;">
        <div slot="header" class="clearfix">
          <span class="tit">人才区域分布</span>
        </div>
        <div class="area-box">
          <ul>
            <li v-for="(item, index) in talentAreaData" :key="index" @click="handleSelectArea(item, index)">
              <span :title="item.key" class="label" :class="{'first': index==active}">{{item.key}}</span>
              <div class="progress">
                <el-progress :percentage="item.percentage" :stroke-width="8" :show-text="false" :color="item.color"></el-progress>
              </div>
              <i class="number">{{item.num}}</i>
            </li>
          </ul>
        </div>
      </el-card>
    </div>
    <!-- 核心人才 -->
    <el-card :body-style="{'padding':'0'}" class="elcard" style="margin-bottom:20px">
      <div slot="header" class="clearfix">
        <span class="tit">
          <span v-if="ipc_kind!==''"><i>“{{name}}”</i>领域</span>
          <span v-if="area!==''"><i>“{{area}}”</i>区域</span>核心人才
        </span>
      </div>
      <ul v-if="list1.length>0" class="list-box">
        <li v-for="(item, index) in list1" :key="index">
          <div class="logo-box"><img src="../../../../assets/img/default-user.png" alt="" ondragstart="return false"></div>
          <h2 @click="toDetails(item)">{{item.name}}</h2>
          <p class="info">
            <span style="flex:1.2">任职机构：<i class="results" :title="item.personOrAgency && item.personOrAgency.join('；')">{{item.personOrAgency.join('；')}}</i></span>
            <span style="flex:0.6">专利数量：<i>{{item.count}}</i></span>
            <span style="flex:1.2">优势领域：<i :title="item.area.join('；')">{{item.area.join('；')||'暂无'}}</i></span>
          </p>
          <p class="info">
            <span style="flex:1">科技成果：<i class="results">暂无</i></span>
          </p>
        </li>
      </ul>
      <p v-else class="no-data">暂无数据</p>
      <el-col v-if="list1.length>0" :span="24" style="text-align:center;padding:10px; 0">
        <el-pagination
          background
          @current-change="handleCurrentChange1"
          layout="prev, pager, next"
          :current-page.sync="ipi1"
          :page-size="ips"
          :total="total1">
        </el-pagination>
      </el-col>
    </el-card>
    <!-- 双跨型人才 -->
    <el-card :body-style="{'padding':'0'}" class="elcard" style="margin-bottom:20px">
      <div slot="header" class="clearfix">
        <span class="tit">
          <span v-if="ipc_kind!==''"><i>“{{name}}”</i>领域</span>
          <span v-if="area!==''"><i>“{{area}}”</i>区域</span>双跨型人才
        </span>
      </div>
      <ul v-if="list2.length>0" class="list-box">
        <li v-for="(item, index) in list2" :key="index">
          <div class="logo-box"><img src="../../../../assets/img/default-user.png" alt="" ondragstart="return false"></div>
          <h2 @click="toDetails(item)">{{item.name}}</h2>
          <p class="info">
            <span style="flex:1.2">合作企业：<i class="results" :title="item.work && item.work.join('；')">{{item.work.join('；')}}</i></span>
            <span style="flex:0.6">专利数量：<i>{{item.count}}</i></span>
            <span style="flex:1.2">优势领域：<i :title="item.area.join('；')">{{item.area.join('；')}}</i></span>
          </p>
          <p class="info">
            <span style="flex:1">科技成果：<i class="results">暂无</i></span>
          </p>
        </li>
      </ul>
      <p v-else class="no-data">暂无数据</p>
      <el-col v-if="list2.length>0" :span="24" style="text-align:center;padding:10px; 0">
        <el-pagination
          background
          @current-change="handleCurrentChange2"
          layout="prev, pager, next"
          :current-page.sync="ipi2"
          :page-size="ips"
          :total="total2">
        </el-pagination>
      </el-col>
    </el-card>
    <!-- 领域人才引进推荐 -->
    <el-card :body-style="{'padding':'0'}" class="elcard">
      <div slot="header" class="clearfix">
        <span class="tit">
          <span v-if="ipc_kind!==''"><i>“{{name}}”</i>领域</span>人才引进推荐
        </span>
      </div>
      <ul v-if="list3.length>0" class="list-box">
        <li v-for="(item, index) in list3" :key="index">
          <div class="logo-box"><img src="../../../../assets/img/default-user.png" alt="" ondragstart="return false"></div>
          <h2 @click="toDetails(item)">{{item.name}}</h2>
          <p class="info">
            <span>任职机构：<i :title="item.personOrAgency.join('；')">{{item.personOrAgency && item.personOrAgency.join('；')}}</i></span>
            <span>可对接技术：<i :title="item.area && item.area.join('；')">{{item.area && item.area.join('；')}}</i></span>
            <span>科技成果（代表作品）</span>
          </p>
          <p class="info">
            <span>可对接本市企业：<i :title="item.docks && item.docks.join('；')">{{item.docks && item.docks.join('；')}}</i></span>
            <span>专利数量：<i>{{item.count}}</i></span>
            <span class="results">暂无</span>
          </p>
        </li>
      </ul>
      <p v-else class="no-data">暂无数据</p>
      <el-col v-if="list3.length>0" :span="24" style="text-align:center;padding:10px; 0">
        <el-pagination
          background
          @current-change="handleCurrentChange3"
          layout="prev, pager, next"
          :current-page.sync="ipi3"
          :page-size="ips"
          :total="total3">
        </el-pagination>
      </el-col>
    </el-card>
    
  </div>
  
</template>

<script>
import { mapState } from 'vuex'
import resize from '@/utils/resize'
import Colors from '@/utils/chartsColors'
export default {
  mixins:[resize],
  data() {
    return {
      chartOne: null,
      chartTwo: null,
      chartOneData: [],
      maxKey: '',
      Index: '',
      active: -1,
      talentAreaData: [],
      list1: [],
      list1Data: [],
      ipi1: 1,
      total1: 0,

      list2: [],
      list2Data: [],
      ipi2: 1,
      total2: 0,

      list3: [],
      list3Data: [],
      ipi3: 1,
      total3: 0,

      ips:5,
      area: '',
      ipc_kind: '',
      name:''
    }
  },
  computed:{
    ...mapState(['levelCode','levelName'])
  },
  methods: {
    // 获取人才领域分布数据
    getChartOneData() {
      this.chartOne.showLoading({
        text: 'loading',
        color: '#0b0a2b',
        textColor: '#0b0a2b',
        maskColor: '#fff',
        zlevel: 0
      })
      this.$post(this.$Url.patent.labelAnalysis, {
        code: this.levelCode,
        mustsArr: {
          an1_type: [
            "个人"
          ]
        },
        
        "aggs": {
          "field": "industry_label",
          "type": "base",
          "size": "10000",
          "showSize":10
        }
      }).then(res => {
        let data = res.data
        if (data) {
          let chartData = []
          let d = JSON.parse(JSON.stringify(data))
          d.sort(function (a, b) {
            return Number(a.doc_count)< Number(b.doc_count) ? 1 : -1;
          })
          this.chartOneData = d // 保存的一个结果
          this.maxKey = d[0].key // 最大key
          let num = d[0].doc_count // 最大值
          
          this.renderChartOne(d)
        }
      }).catch(err => {})
    },
    renderChartOne(data, isClick) {
      let seriesData = []
      for(let i in data){
        let NameColor = '#878696'
        let lineColor = '#ccc'
        let fontWeight = '500'
        if(isClick && data[i].key === this.maxKey){
          NameColor='#514bad'
          fontWeight = 'bold'
          lineColor = '#514bad'
        }
        seriesData.push({
          name:data[i].value,
          value: data[i].doc_count,
          key: data[i].key,
          label:{
            normal:{
              rich: {
                name:{
                  color: NameColor,
                  fontWeight: fontWeight 
                } 
              }
            }
          },
          labelLine: {
            normal: {
              lineStyle: {
                color: lineColor
              }
            }
          }
        })
      }
      let option = {
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'item',
          formatter: "{b}: {c} ({d}%)",
          position: 'top'
        },
        grid:{
          top:'50%',
          x: '5%'
        },
        color: Colors.color,
        series: [
          {
            type: 'pie',
            avoidLabelOverlap: true,
            radius: ['34%', '50%'],
            minAngle: 24,
            startAngle: 70, //起始角度
            data: seriesData,
            itemStyle:{
              normal: {
                borderWidth: 2, 
                borderColor: '#fff',
              }
            },
            label: {
              show: true,
              position: 'outer',
              // alignTo: 'labelLine',
              distanceToLabelLine: 5,
              formatter: (params) => {
                let str = ''
                if (params.name.length > 10) {
                  str += `{name|${params.name.substring(0, 10)}...}`
                } else {
                  str += `{name|${params.name}}`
                }
                str += `  {name|${params.percent}%}`
                return str
              },
              rich: {
                icon: {},
                name: {
                  fontSize: 12,
                  color: '#86899e'
                },
              }
            },
          }
        ]
      }
      this.chartOne.hideLoading()
      this.chartOne.setOption(option, true)
    },
    // 点击切换人才领域分布
    chartOneClick(v) {
      this.ipi1 = 1
      let num = v.data.value
      // 取消之前的高亮 或者默认
      this.chartOne.dispatchAction({  
        type: 'downplay'
      })
      if (this.Index !== v.dataIndex) {
        this.Index = v.dataIndex // 点击高亮
        this.maxKey = v.data.key
        this.chartOne.dispatchAction({
          type: "highlight",
          dataIndex: this.Index
        })
        this.ipc_kind = v.data.key
        this.area = ''
        this.name = v.data.name
      } else {
        this.Index = -1
        this.maxKey = -1
        this.ipc_kind = ''
        this.area = ''
        this.name = ''
      }
      this.active = -1
      this.getTalentAreaData()
      this.getList1Data()
      this.getList2Data()
      this.getList3Data()
      this.renderChartOne(this.chartOneData, true)
      
    },
    // 人才区域分布
    getTalentAreaData() {
      let params = {
        code: this.levelCode,
        mustsArr: {
          an1_type: [
            "个人"
          ]
        },
        "prefix":{
          "industry_label": this.ipc_kind
        },
        aggs: {
          size:"20",
          type: "base",
          subAggs: {
          size:"10000",
            field: "in2id.id",
            type: "base"
          }
        }
      }
      
      let last4Code = this.levelCode.substr(this.levelCode.length - 4, this.levelCode - 1)
      if (last4Code === '0000') { // 结尾4个0，代表省，否则为市
        params['aggs']['field'] = 'city'
      } else {
        params['aggs']['field'] = 'area'
      }

      this.$post(this.$Url.production.personArea, params).then(res => {
        let data = res.data
        this.talentAreaData = []
        if (data) {
          let d = data.sort((a, b) => {
            return b.num - a.num
          })
          let allCount = 0
          for (let i in d) {
            allCount += d[i].num
          }
          for (let i in d) {
            let dd = d[i]
            dd = {
              percentage: Number((d[i].num / allCount) * 100),
              color: Colors.color[0],
              ...dd
            }
            this.talentAreaData.push(dd)
          }
        }
      }).catch(err => {})
    },
    handleSelectArea(item, index) {
      if (this.active !== index) {
        this.active = index
        for (let i in this.talentAreaData) {
          if (Number(i) === Number(index)) {
            this.$set(this.talentAreaData[i], 'color', '#7f7bea')
          } else {
            this.$set(this.talentAreaData[i], 'color', Colors.color[0])
          }
        }
      } else {
        this.active = -1
        this.$set(this.talentAreaData[index], 'color', Colors.color[0])
      }
      this.area = item.key
      
      this.getList1Data()
      this.getList2Data()
    },
    // 区域核心人才
    getList1Data() {
      let musts = {}
      this.area !== '' ? musts['area'] = this.area : musts
      // this.ipc_kind !== '' ? musts['ipc_kind'] = this.ipc_kind : musts
      this.$post(this.$Url.production.supPerson, {
        code: this.levelCode,
        musts: musts,
        "prefix":{
          "industry_label":this.ipc_kind
        },
        aggs: {
          size: "50",
          field: "in2id.id",
          type: "base",
          subAggs: [
            {
              size: "1",
              field: "pn",
              type: "base"
            },
            {
              size: "2",
              field: "ipc_kind",
              type: "base"
            },
            {
              size: "1",
              field: "an",
              type: "base"
            }
          ]
        }
      }).then(res => {
        let data = res.data
        if (data) {
          this.list1Data = data
          this.total1 = data.length
          this.ipi1 = 1
          this.list1 = this.list1Data.slice((this.ipi1-1)*this.ips,this.ipi1*this.ips)
        }
      }).catch(err => {})
    },
    // 分页
    handleCurrentChange1(val){
      this.ipi1 = val
      this.list1 = this.list1Data.slice((this.ipi1-1)*this.ips,this.ipi1*this.ips)
    },
    // 区域双跨型人才
    getList2Data() {
      let musts = {}
      this.area !== '' ? musts['area'] = this.area : musts
      // this.ipc_kind !== '' ? musts['ipc_kind'] = this.ipc_kind : musts
      this.$post(this.$Url.production.personSpan, {
        code: this.levelCode,
        musts: musts,
        "prefix":{
          "industry_label":this.ipc_kind
        },
        aggs: {
          size: "100",
          field: "in2id.id",
          type: "base",
          subAggs: [
            {
              size: "1",
              field: "pn",
              type: "base"
            },
            {
              size: "2",
              field: "ipc_kind",
              type: "base"
            },
            {
              size: "5",
              field: "an",
              type: "base"
            }
          ]
        },
        shouldArr: {
          an1_type: [
            "高校",
            "院所"
          ]
        }
      }).then(res => {
        let data = res.data
        if (data) {
          this.list2Data = data
          this.total2 = data.length
          this.ipi2 = 1
          this.list2 = this.list2Data.slice((this.ipi2-1)*this.ips,this.ipi2*this.ips)
        }
      }).catch(err => {})
    },
    // 分页
    handleCurrentChange2(val){
      this.ipi2 = val
      this.list2 = this.list2Data.slice((this.ipi2-1)*this.ips,this.ipi2*this.ips)
    },
    // 领域人才引进推荐
    getList3Data() {
      let musts = {
        date_sort: '1'
      }
      this.area !== '' ? musts['area'] = this.area : musts
      // this.ipc_kind !== '' ? musts['ipc_kind'] = this.ipc_kind : musts
      this.$post(this.$Url.production.personAttract, {
        code: this.levelCode,
        musts: musts,
        "prefix":{
          "industry_label":this.ipc_kind
        },
        aggs: {
          size: "100",
          field: "in2id.id",
          type: "base",
          subAggs: [
            {
              size: "1",
              field: "pn",
              type: "base"
            },
            {
              size: "2",
              field: "ipc_kind",
              type: "base"
            },
            {
              size: "5",
              field: "an",
              type: "base"
            }
          ]
        },
      }).then(res => {
        let data = res.data
        if (data) {
          this.list3Data = data
          this.total3 = data.length
          this.ipi3 = 1
          this.list3 = this.list3Data.slice((this.ipi3-1)*this.ips,this.ipi3*this.ips)
          for (let i in this.list3) {
            let ipc_kinds = this.list3[i].area
            this.getDocking(ipc_kinds, (docks) => {
              let arr = []
              for (let j in docks) {
                arr.push(docks[j].key)
              }
              this.$set(this.list3[i], 'docks', arr.length > 0 ? arr : ['暂无'])
            })
          }
        }
      }).catch(err => {})
    },
    // 获取本市对接企业
    getDocking(ipc_kinds, func) {
      this.$post(this.$Url.production.docking, {
        code: this.levelCode,
        mustsArr: {
          ipc_kind: ipc_kinds,
          an1_type: [
            "企业"
          ]
        },
        aggs: {
          size: "2",
          field: "an1",
          type: "base"
        }
      }).then(res => {
        let data = res.data
        if (data) {
          func(data)
        }
      }).catch(err => {})
    },
    // 分页
    handleCurrentChange3(val){
      this.ipi3 = val
      this.list3 = this.list3Data.slice((this.ipi3-1)*this.ips,this.ipi3*this.ips)
      for (let i in this.list3) {
        let ipc_kinds = this.list3[i].area
        this.getDocking(ipc_kinds, (docks) => {
          let arr = []
          for (let j in docks) {
            arr.push(docks[j].key)
          }
          this.$set(this.list3[i], 'docks', arr.length > 0 ? arr : ['暂无'])
        })
      }
    },
    headerCellStyle() {
      return {
        'font-weight': 'normal',
        'color': '#86899e',
        'background-color': '#f3f6f9'
      }
    },
    toDetails(item) {
      /* console.log((item.personOrAgency && item.personOrAgency.join('；')))
      return  */
      this.$router.push({
        name: 'SynergyTalentDetails',
        query: {
          name: item.name,
          id: item.id,
          area: item.area,
          count: item.count,
          personOrAgency: (item.personOrAgency && item.personOrAgency.join('；')) || ''
        }
      })
    }
  },
  mounted() {
    this.chartOne = this.$echarts.init(document.getElementById('chartOne'))
    this.getChartOneData()
    this.chartOne.on('click', this.chartOneClick)
    this.getTalentAreaData()
    this.getList1Data()
    this.getList2Data()
    this.getList3Data()
  }
}
</script>

<style lang="scss" scoped>
.card-box {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.elcard {
  flex: .5;
  text-align: left !important;
  .tit {
    font-size: 14px;
    font-weight: bold;
    i {
      color: #504da6;
    }
  }
}
.area-box {
  position: relative;
  list-style: none;
  height: 390px;
  overflow: auto;
  ul {
    position: relative;
    list-style: none;
    li {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 14px 0;
      cursor: pointer;
      &:hover {
        background-color: #eee;
      }
      .label {
        width: 120px;
        font-size: 14px;
        text-indent: 1em;
        color: #4f515b;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &.first {
          font-weight: bold;
          color: #504da6 !important;
        }
      }
      .progress {
        flex: 1
      }
      .number {
        width: 80px;
        text-indent: 1em;
        font-style: normal;
        font-size: 12px;
        color: #86899e;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  
}
.list-box {
  position: relative;
  list-style: none;
  li {
    position: relative;
    display: block;
    min-height: 140px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 140px;
    border-bottom: 1px solid #e5e7f0;
    .logo-box {
      position: absolute;
      top: 20px;
      left: 20px;
      width: 100px;
      height: 100px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #d9e0ee;
      box-sizing: border-box;
    }
    h2 {
      width: 100%;
      margin-bottom: 20px;
      font-size: 18px;
      font-weight: bold;
      color: #4f515b;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
    }
    .info {
      display: flex;
      align-items: center;
      width: 100%;
      margin-top: 10px;
      span {
        flex: 1;
        padding-right: 10px;
        font-size: 12px;
        color: #86899e;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        i {
          font-style: normal;
          color: #4f515b;
        }
      }
      .results {
        width: 100%;
        color: #504da6;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
.no-data {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
}
</style>